Piping UIをビルド時にデフォルトのPiping Serverを任意に変更してセルフホストする

やりたいこと

Piping UIのデフォルトのPiping ServerのURLの候補をPiping UIのビルド時に任意のURLに変更すること。

Piping UIの0.4.13からこの機能がついた。

Piping UIを使う人は関係なくPiping UIを自分でビルドしてセルフホストする人に関係のある機能。

なぜ任意のURLにビルド時に変更したいか？

Piping UI ()だとデフォルトのままだと以下のPiping Serverが候補にある。

https://gyazo.com/db3ccb496bacfe53f1552cbcf552eb4d

つまり、一番手軽に(少ないステップで)転送したいならnwtgck.iconが管理しているを経由することになる。

Piping ServerはDocker Hubのpull数を見るだけでもそこそこ多く使われていて自分用のPiping Serverを管理している人もいる。

そういうPiping Serverをセルフホストしている人が自分のPiping Serverを経由しやすいPiping UIをセルフホストできればより気持ちよく使えるはず。Piping Serverをだけではなく、他のサーバーに分散することに繋がると思う。

確かに上記のPiping Serverの選択のUIはサーバーを追加したり削除したりでき、ブラウザ内だけで保存され同じブラウザからなら経由するPiping ServerのURLは保持されて自分好みのサーバー候補にできる。だがビルド時にサーバーのURLの候補を決定できセルフホストできればそのPiping UIはどの端末から開いてもビルドした人が好きなPiping Serverを経由する設定がデフォルトで使える。

やり方

以下のコマンドを叩くと./distに生成物ができる。

code:console

$ git clone https://github.com/nwtgck/piping-ui-web.git

$ cd piping-ui-web

$ npm ci

$ PIPING_SERVER_URLS='["https://mypiping.server", "https://mypipi.ng"]' npm run build

上記のコマンドで./distにHTML/CSS/JavaScriptが生成されていてそれを公開すればPIping UIをセルフホストできる。

GitHub PagesやNetlifyを使えばもっと手軽だと思う。

上記の設定だとデフォルトのPiping ServerのURLは以下のようになる。

https://gyazo.com/905f2fe3b7a733458056e47ae74124b1

おまけ: Netlifyのデプロイの設定

Netlifyは無償で使え、をforkしてデプロイの設定に以下のように書けばデプロイできる。

https://gyazo.com/f465bc8a92547ee8dcaf2af94b084a06